<!--
 * @Descripttion:
 * @version:
 * @Author: ljl
 * @Date: 2020-05-22 21:38:57
 * @LastEditors: ljl
 * @LastEditTime: 2020-05-23 00:47:05
-->
<template>
  <div class="dashboard">
    <div>
      视频回放
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getVideo } from '@/api/video'

import flvjs from 'flv.js'
export default {
  name: 'Video',
  components: {

  },
  data() {
    return {
      pathUrl: process.env.VUE_APP_BASE_API,
      activeName: 'first',
      id: '',
      // url: 'rtsp://admin:12345@192.168.0.101:8080/h233/ch1/main/av_stream',
      url: '',
      player: null
    }
  },
  computed: {
    ...mapGetters([
      'projectsId'
    ])
  },
  watch: {

  },
  beforeMount() {
    // this.getImg()
  },
  mounted() {
    // this.startPlay()
  },
  beforeDestroy() {
    // this.player.destory()
  },
  destroyed() {

  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    startPlay() {
      if (flvjs.isSupported()) {
        const video = this.$refs.player
        if (video) {
          this.player = flvjs.createPlayer({
            type: 'flv',
            isLive: true,
            // 必须与node搭建的流媒体服务器中的http的端口和推流的参数吻合
            url: 'rtsp://admin:123456@192.168.2.113:554/'
          // url: `ws://localhost:9528/rtsp/${this.id}/?url=${this.rtsp}`
          }, {
            enableStashBuffer: true,
            stashInitialSize: 128
          })
          this.player.attachMediaElement(video)
          try {
            this.player.load()
            this.player.play()
          } catch (error) {
            console.log(error)
          }
        }
      }
    },
    async getImg() {
      console.log(this.url)
      const res = await getVideo(1)
      if (res.code === 200) {
        this.url = res.data
        // this.getImg()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  display: flex;
  margin: 21px 18px 0 18px;
  div{
    width:100%;
    background:rgba(23, 27, 35, 0.36);
    margin-right: 15px;
  }
}
.demo-video {
    max-width: 880px;
    max-height: 660px;
}
</style>
